<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<input type="button" id="test">-->
<a href="insertBook.html">添加书籍信息</a>
<table id="BookData" cellspacing="0" cellpadding="0" border="1">
    <tr>
        <th>编号</th>
        <th>书名</th>
        <th>作者</th>
        <th>图片</th>
        <th>日期</th>
        <th>价格</th>
        <th>描述</th>
        <th>修改/删除</th>
    </tr>
</table>
<script src="js/jq.js"></script>
<script>
  $(function (){
    // $('#test').click(function (){
    //     alert('test')
    //
    // })
      //页面打开后直接发ajax请求
    $.ajax({
        url:'http://localhost:8081/book/queryAll',
        success(res) {
            var bookData = $('#BookData');
            $.each(res,function (index,el){
                var tr=$('<tr></tr>');
                $.each(el,function (k,v){
                    var td = $(`<td>${v}</td>`)//反单引号
                    tr.append(td);
                });
                var td = $(`<td><a href="#" data-id="${el.bookId}" class="up">修改</a>/<a href="#" data-id="${el.bookId}" class="del">删除</a></td>`);
                tr.append(td);
                //追加tr到booData
                bookData.append(tr);
            });
        }
    });
    //删除操作，用事件委托
      $('#BookData').on('click','.del',function (){
          var id = $(this).attr('data-id');
          if (confirm(`是否删除${id}的书籍内容`)){
              $.ajax({
                  url: 'http://localhost:8081/book/remove',
                  data:{
                      bookId:id
                  },
                  success(){
                      location.href='queryBook.html';
                  }
              });
          }
      //阻止跨域
          return false;
      });
      //修改操作，用事件委托
      $('#BookData').on('click','.up',function (){
          var id = $(this).attr('data-id');
          //使用本地存储，存储id的值
          localStorage.setItem("id",id);
          location.href = "updateBook.html"
          //阻止跨域
          return false;
      });
  });
</script>
</body>
</html>